JS数组操作

2023-09-08 03:49| 来源: 网络整理| 查看: 265

JS数组前言数组声明数组应用自定义数组函数数组数据窗口化ArrayBuffer使用

前言

在JavaScript（以下简称JS）编程过程中，经常需要用到数组，对数组有很多操作，下面一起来看看数组的各种使用。

数组声明

在JS中声明数组有2种方式直接用[]或new 关键字，对于TypeArray和ArrayBuffer只能用new关键字：

var jsArray = []; var jsArray1 = new Array(); //TypeArray在声明时可直接传入一个数组赋初值:new Float32Array(array); var jsTypeArray = new Float32Array(); var jsArrayBuffer = new ArrayBuffer();//构造参数只有长度，声明可不传入长度 console.log(jsArray); console.log(jsArray1); console.log(jsTypeArray ); console.log(jsArrayBuffer);

运行结果：在这里插入图片描述声明数组时也可以传入数组长度或赋初值，[]不需要指定长度，ArrayBuffer只能给长度(后面有ArrayBuffer的应用)，不能赋初值：

var jsArray = [1,0,2,4]; var jsArrayObj = new Array(4);//一个数据为长度，多个数据为元素var jsArrayObj = new Array(4,2); var jsTypeArray = new Float32Array(jsArray);//或者 new Float32Array([1,0,2,4]); console.log(jsArray); console.log(jsArrayObj); console.log(jsTypeArray);

[]不需要指定长度，Array可以指定长度也可以设置初始值，结果如下：在这里插入图片描述

数组应用

向数组内添加元素：

var jsArray = []; var jsArrayObj = new Array(); for (var i = 0; i jsArrayObj[i] = i;//jsArrayObj.push(i); } console.log(jsArray); console.log(jsArrayObj);

使用索引添加或者push函数添加都可以：在这里插入图片描述对于Array数组的其他方法本文不做讲解，w3school有详细的文档look→，JS Array对象。

自定义数组函数

JS的prototype属性可以让你向数组添加方法或属性。比如我们给数组取个名字，定义一个函数，为了区分和JS本身的属性和函数，我们定义的使用大写字母开头，比如我们想求多个长度不一的数组的总和，给声明的数组定义一个Sum方法：

var jsArray = new Array([1,0,2,4],[1,0,2,4,2,0,4,8],[100,0]); jsArray.Name = "ArrayList"; jsArray.Sum = function () { var sum = 0; for (var i = 0; i //将5个长度为4的数组通过set函数依次赋给jsBuffer，i*4为开始索引，意思就是从i*4索引开始赋值 jsBuffer.set([0+i,1+i,2+i,3+i],i*4); } console.log(jsBuffer);//打印原始数据 //通过copyWithin函数将jsBuffer数组索引4-20的元素复制并往前移动4个位置 jsBuffer.copyWithin(0,4,20); console.log(jsBuffer);//打印移动后的数组，会发现原始数组0-4位置的元素被覆盖了，而后面多了一组一样的数据 //接着通过set函数将最后那一组数据替换 jsBuffer.set([5,6,7,8],16); console.log(jsBuffer);//打印结果 //再来一次 jsBuffer.copyWithin(0,4,20); jsBuffer.set([6,7,8,9],16); console.log(jsBuffer);

是不是很有趣呢？看结果：在这里插入图片描述

ArrayBuffer使用

关于ArrayBuffer，它是个字节数组，和Java中的ByteArray作用差不多，固定长度的原始二进制数据缓冲区。我们不能直接操作ArrayBuffer，而是要通过TypeArray或者DataView来进行操作：使用TypeArray操作ArrayBuffer：

var jsBuffer = new ArrayBuffer(20); var jsUint8 = new Uint8Array(jsBuffer); var jsInt8 = new Int8Array(jsBuffer); var jsInt16 = new Int16Array(jsBuffer); var jsInt32 = new Int32Array(jsBuffer); //上面的数组可以不用全部声明，需要用的的才声明，这里是做演示 //我们来打印这些数组的长度， //ArrayBuffer没有length属性，因为它是字节数组 console.log("Buffer：" + jsBuffer.byteLength); console.log("Uint8：" + jsUint8.length);//一个Uint8占1个字节，长度为20 console.log("Int8：" + jsInt8.length);//一个Int8占1个字节，长度为20 console.log("Int16：" + jsInt16.length);//一个Int16占2个字节，长度为10 console.log("Int32：" + jsInt32.length);//一个Int32占4个字节，长度为5 //给Int32数组赋值，则其他数组会自动写入值 for (var i = 0; i jsInt16[j] = j * 10; } console.log(jsBuffer);

问为什么ArrayBuffer里面没有Float类型的数组呢，因为这是字节数组，字节只能是int或uint储存。如下所示：在这里插入图片描述第二种方法，使用DataView操作ArrayBuffer，刚才还在说为什么没有float类型的数组，想要将float类型的数据存入其中怎么办？别急下面就能解决问题，DataView可以读写多种数值类型：

var jsBuffer = new ArrayBuffer(16); // 创建ViewData var jsView = new DataView(jsBuffer); //使用setType方法赋值 jsView.setFloat32(0, 12.5); jsView.setFloat32(2, 31.3); jsView.setFloat32(4, 52.2); console.log(jsBuffer); //获取之前的赋值，精度会有误差 console.log(jsView.getFloat32(0)); console.log(jsView.getFloat32(2)); console.log(jsView.getFloat32(4));

在这里插入图片描述

本文到这里就结束了，感谢阅读，祝你有所收获！

【本文地址】

JS数组操作

JS数组操作

今日新闻

推荐新闻